<template>
  <div class="search">
    <!-- 头部导航 -->
    <hmnavbar title="面经搜索" path="/shareList"></hmnavbar>
    <!-- 搜索区域 -->
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      @search="searchdata"
      @cancel="onCancel"
    />
    <div v-if="isShowHot">
      <!-- 大家都在搜索 -->
      <div class="hot">
        <div class="title">
          大家都在搜索
        </div>
        <div class="tags">
          <span
            @click="searchdata(item)"
            v-for="(item, index) in searchTopList"
            :key="index"
            >{{ item }}</span
          >
        </div>
      </div>
      <!-- 历史记录 -->
      <div class="history">
        <van-cell title="历史记录">
          <template #default>
            <span @click="clear">清空</span>
          </template>
        </van-cell>
        <div class="tags">
          <span
            @click="searchdata(item)"
            v-for="(item, index) in historyList"
            :key="index"
            >{{ item }}</span
          >
        </div>
      </div>
    </div>
    <div v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onload"
      >
        <share
          v-for="(item, index) in searchList"
          :key="index"
          :item="item"
        ></share>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getSearchTopApi, getShareApi } from '@/api/articles.js'
import share from '../find/share.vue'
import { setlocal, getlocal, removelocal } from '@/utils/local.js'
export default {
  data () {
    return {
      // 搜索框中的数据
      value: '',
      // 热门搜索列表
      searchTopList: [],
      // 控制热门数据的显示与隐藏
      isShowHot: true,
      loading: false,
      finished: false,
      start: -5,
      limit: 5,
      total: 0,
      // 得到热门搜索关键字对应的文章列表
      searchList: [],
      // 保存搜索历史数据
      historyList: []
    }
  },
  created () {
    this.getSearchTop()
    // 得到 localstorage 中的数据
    this.historyList = JSON.parse(getlocal('history')) || []
  },
  methods: {
    // 清除搜索历史
    clear () {
      // 访问是否清空
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否清空历史数据'
        })
        .then(() => {
          removelocal('history')
          this.historyList = []
          this.$toast.success('搜索历史清除完成')
        })
        .catch(() => {})
    },
    async onload () {
      this.start += this.limit
      // 发送请求到服务器得到关键字对应的文章列表
      const res = await getShareApi({
        start: this.start,
        limit: this.limit,
        q: this.value
      })
      // 遍历数据源，将数据源中所有关键字添加上 `<span style="color: red"></span>`
      res.data.list.forEach(item => {
        item.title = item.title.replace(
          this.value,
          `<span style="color: red">${this.value}</span>`
        )
      })
      this.searchList.push(...res.data.list)
      this.total = res.data.total
      this.loading = false
      if (this.searchList.length >= this.total) {
        this.finished = true
      }
    },
    // 点击热门搜索按钮会触发
    searchdata (item) {
      if (item.trim().length === 0) {
        // 说明关键字为空
        this.$toast('对不起，搜索框中关键字不能为空')
        return
      }
      // 得到搜索的关键字
      this.historyList.unshift(item)
      // 去重
      this.historyList = [...new Set(this.historyList)]
      // 限长： 搜索历史中最多保存 6 条数据
      this.historyList.splice(6)
      // 将搜索的关键字保存到 localstorage 中
      setlocal('history', JSON.stringify(this.historyList))
      // 将点击的元素的文本赋值给 value
      this.value = item
      // 隐藏热门搜索区域 显示列表搜索
      this.isShowHot = false
    },
    async getSearchTop () {
      // 得到热门搜索数据
      const res = await getSearchTopApi()
      this.searchTopList = res.data
    },
    // // 在搜索框中的输入内容之后，点击移动设置上的完成按钮时触发
    // onSearch (value) {
    //   // 开始搜索
    //   // 将点击的元素的文本赋值给 value
    //   this.value = value
    //   // 隐藏热门搜索区域 显示列表搜索
    //   this.isShowHot = false
    // },
    // 点击右侧取消按钮触发
    onCancel () {
      // 将面经列表隐藏，将搜索数据显示
      this.isShowHot = true
      // 初始化数据
      this.finished = false
      this.start = -5
      this.limit = 5
      this.total = 0
      this.searchList = []
    }
  },
  components: {
    share
  }
}
</script>

<style lang="less" scoped>
.search {
  .hot {
    padding: 0 15px;
    .title {
      font-size: 18px;
      margin-top: 20px;
    }
    .tags {
      display: flex;
      flex-wrap: wrap;
      span {
        background-color: #eceaea;
        padding: 6px;
        font-size: 12px;
        margin-right: 10px;
        margin-top: 20px;
      }
    }
  }
  .history {
    margin-top: 20px;
    /deep/ .van-cell__title {
      span {
        font-size: 18px;
      }
    }
    .tags {
      display: flex;
      flex-wrap: wrap;
      padding: 0 15px;
      span {
        background-color: #eceaea;
        padding: 6px;
        font-size: 12px;
        margin-right: 10px;
        margin-top: 20px;
      }
    }
  }
}
</style>
